import styles from './index.less'
import Controls from './Modules/control'

export default class extends React.Component {

    state = {
        control:null,
    }

    componentDidMount(){
        if (this.detectWebGL() ) {
            this.initApp();
            
        }
        else {
            this.noWebGL();
        }
        
    }

    initApp() {
        this.state.control = new Controls();
        this.renderCanvas(0);
    }
    renderCanvas(t) {
        this.state.control.update(t * 0.001);
        requestAnimationFrame(this.renderCanvas.bind(this));
    }

    // 探测webGL
    detectWebGL() {
        try {
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
            window["EXT_STLOD_SUPPORT"] = context.getExtension("EXT_shader_texture_lod") ? true : false;
            return !!(window.WebGLRenderingContext && context);
        }
        catch (e) {
            return false;
        }
    }

    noWebGL() {
        document.getElementById("preloader").className = "visible";
        document.getElementById("preLogo").style.display = "block";
        document.getElementById("preButton").style.display = "block";
        document.getElementById("preDetail").innerHTML = translations["BROWSER_BAD"];
    }
   

    render() {

        return (
            <main id="pageMain" className={styles.pageMain}>

                {/* Desktop controls */}
                <div className={[styles.ctrls,styles.ctrlKeys].join(' ')} id="ctrlKeys">
                    <div className={[styles.ctrlIcon,styles.ctrlIcoKeys ].join(' ')} id="ctrlIcoKeys"></div>
                    <div className={styles.ctrlDesc}>Car Controls</div>
                </div>
                <div className={[styles.ctrls,styles.ctrlMouse].join(' ')} id="ctrlMouse">
                    <div className={[styles.ctrlIcon,styles.ctrlIcoMouse ].join(' ')} id="ctrlIcoMouse"></div>
                    <div className={styles.ctrlDesc}>Drag camera</div>
                </div>
                <div className={[styles.ctrls,styles.ctrlScroll].join(' ')} id="ctrlScroll">
                    <div className={[styles.ctrlIcon,styles.ctrlIcoScroll ].join(' ')} id="ctrlIcoScroll"></div>
                    <div className={styles.ctrlDesc}>Scroll zoom</div>
                </div>

                {/* Preloader widget */}
                <div id="preloader" className="">
                    <div id="preHeader">FF 91 VR Test Ride</div>
                    <div id="preBar">
                        <div id="preProg" style={{width:'100%'}}></div>
                    </div>
                    <div id="preDetail">Tap screen to begin.</div>
                    <div id="preLogo"></div>
                </div>

            </main>
        )
    }
}
